<template>
  <div>
    <h2>{{newsInfo.content}}</h2>
    <div class="title">
      <span>点击次数：{{newsInfo.count}}</span>
      <span>日期：{{newsInfo.date | dataFormat}}</span>
    </div>
    <hr />
    <img :src="newsInfo.img" />
    <p>
      当然玩归玩，作为一名Vue爱好者，我们理应深入游戏内部，一探代码的实现。
      接下来我们就先来分析一下要完成这样的一个游戏，主要需要实现哪些功能。下
      面我就直接将此实例的功能点罗列在下了：
    </p>
    <p>
      以上便是本实例的主要功能点，可见游戏功能并不复杂，我们只需一个个攻破就OK了，接下来我就来展示一下各个功能点的Vue代码。
    </p>
    <p>
      作为一款以数据驱动的JS框架，Vue的HTML模板很多时候都应该绑定数据的，比如此游戏的方块格子，我们这里肯定是不能写死的，代码如下：
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newsInfo: {}
    };
  },
  props: ["list"],
  methods: {},
  created() {
    let id = this.$route.params.id;
    this.list.some(item => {
      if (item.id == id) {
        this.newsInfo = item;
        return true;
      }
    });
  }
};
</script>

<style scoped>
h2 {
  display: flex;
  justify-content: center;
}
.title {
  display: flex;
  justify-content: space-between;
}
</style>